<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>SVG切图</title>
	</head>
	<style>
		body{background-color: black;}
		.SvgWrapper>div{margin: 1em;}
		.SvgWrapper svg{max-width: 100%;max-height: 100%;}
		.TopBar{height: 78px;}
		.SymbleIcon{height:34px;width: 34px;}
		.btn{display: inline-block;}
		.BgCover{background-position: center;background-repeat: no-repeat;background-size: contain;}
		
		.btn01{width: 96px; height: 42px;background-image: url(SVG/Button1-1.svg);}
		.btn01:hover{background-image: url(SVG/Button1-2.svg);}
		.btn02{width: 136px; height: 52px;background-image: url(SVG/Button2-1.svg);}
		.btn02:hover{background-image: url(SVG/Button2-2.svg);}
		.dia01{width:225px ; height:117px ;background-image: url(SVG/diaBg01.svg);}
		.dia02{width: 309px; height:264px ;background-image: url(SVG/diaBg02.svg);}
		.dia03{width:249px ; height:232px ;background-image: url(SVG/diaBg03.svg);}
		.dia04{width:566px ; height:269px ;background-image: url(SVG/diaBg04.svg);}
		.Warehouse{width:112px ; height:87px ;}
		.Icon{width: 72px; height: 72px;}
		.Icon01{background-image: url(SVG/icon1-1.svg);}
		.Icon01-d{background-image: url(SVG/icon1-2.svg);}
		.Icon02{background-image: url(SVG/icon2-1.svg);}
		.Icon02-d{background-image: url(SVG/icon2-2.svg);}
		.Icon03{background-image: url(SVG/icon3-1.svg);}
		.Icon03-d{background-image: url(SVG/icon3-2.svg);}
		.Block{width: 455px;display: flex;flex-direction: column;}
		.Block .BlockTitle{height: 46px;background-image: url(SVG/BlockBg.svg);background-position: top center;background-repeat: no-repeat;background-size: cover;}
		.Block .BlockTitle h3{color: #fff;margin: 0;padding-left: 40px;padding-top: 8px;font-weight: normal;}
		.Block .BlockBody{flex: 1; padding: 10px 25px; color: #fff;background-image: url(SVG/BlockBg.svg);background-position: bottom center;background-repeat: no-repeat;background-size: cover;}
		.Block.NoTitle .BlockTitle, .Block.NoTitle .BlockBody{background-image: url(SVG/BlockBg2.svg);}
		.Block.NoTitle .BlockBody{margin-top: -30px;}
	
	/* 自适就能弹窗  开始*/
		.dia05{width: 249px;color: #fff;}
		.dia05 .diaTitle{background-image: url(SVG/diaBg05.svg);background-position: top center;background-repeat: no-repeat;background-size: cover;}
		.dia05 .diaTitle h3{margin: 0;padding-left: 20px;padding-top: 20px;font-weight: normal;font-size: 18px}
		.dia05 .DiaBody{background-image: url(SVG/diaBg05.svg);background-position: bottom center;background-repeat: no-repeat;background-size: cover;padding:10px 20px;}
	
	/* 自适就能弹窗  开始*/
	</style>
	<body>
		<div class="SvgWrapper">
			<div class="TopBar">
				<img  src="SVG/TopBg.svg"/>
			</div>
			<div class="SymbleIcon">
				<img  src="SVG/Symble01.svg"/>
			</div>
			<div class="SymbleIcon">
				<img  src="SVG/Symble02.svg"/>
			</div>
			<div class="SymbleIcon">
				<img  src="SVG/Symble03.svg"/>
			</div>
			<div class="SymbleIcon">
				<img  src="SVG/Symble04.svg"/>
			</div>
			<a class="BgCover btn btn01"></a>
			<a class="BgCover btn btn02"></a>
			<div class="BgCover dia01"></div>
			<div class="BgCover dia02"></div>
			<div class="BgCover dia03"></div>
			<div class="BgCover dia04"></div>
			
			<div class="Warehouse">
				<img  src="SVG/Warehouse.svg"/>
			</div>
			
			<div class="BgCover Icon Icon01"></div>
			<div class="BgCover Icon Icon01-d"></div>
			<div class="BgCover Icon Icon02"></div>
			<div class="BgCover Icon Icon02-d"></div>
			<div class="BgCover Icon Icon03"></div>
			<div class="BgCover Icon Icon03-d"></div>
			<div class="Block" style="height: 400px;">
				<div class="BlockTitle"><h3>标题</h3></div>
				<div class="BlockBody">内容</div>
			</div>
			
			<div class="Block NoTitle" style="height: 250px;">
				<div class="BlockTitle"></div>
				<div class="BlockBody">内容</div>
			</div>
			
			<div class="dia05" >
				<div class="diaTitle"><h3>自适应弹窗</h3></div>
				<div class="DiaBody">
					内容<br />
					内容<br />
					内容<br />
					内容<br />
					内容<br />
					内容<br />
					内容<br />
					内容<br />
					内容<br />
					内容<br />
					<p>
						内容很长长长很长长长很长长长很长长长很长长长很长长长很长长长很长长长很长长长很长长长很长长长很长长长很长长长很长长长
					</p>
				</div>
			</div>
			
		</div>
		
		
	</body>
</html>